<template>
    <div class="product-box">
        <el-form :model="formData" ref="formRef" label-width="120px" label-position="left">
        <div class="product-item">
            <div class="product-title">品类信息</div>
            <div class="product-content">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="行业/品类" prop="categoryDictId" required>
                                <el-cascader 
                                    disabled  
                                    v-model="formData.categoryDictId" 
                                    :options="categoryList" 
                                    :props="{ expandTrigger: 'hover', label: 'name', value: 'id', children: 'children'}"
                                    style="width: 240px"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
            </div>
        </div>
        <div class="product-item">
            <div class="product-title">产品信息</div>
            <div class="product-content">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="ProdID" prop="prodId" v-if="formData.status === '2'">
                                <p>{{ formData.prodId }}</p>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="产品名称中文" prop="name" required>
                                <el-input disabled v-model="formData.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="产品名称英文" prop="nameEn" required>
                                <el-input disabled v-model="formData.nameEn"></el-input></el-form-item></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="品牌名称中文 " prop="brand" required>
                                <el-input disabled v-model="formData.brand"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="品牌名称英文" prop="brandEn" required>
                                <el-input disabled v-model="formData.brandEn"></el-input></el-form-item></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="产品型号" prop="name" required>
                                <el-input disabled v-model="formData.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="OS系统版本" prop="osSystemVersion" required>
                                <el-input disabled v-model="formData.osSystemVersion"></el-input></el-form-item></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="OS类型中文" prop="osType" required>
                                <el-select v-model="formData.osType" disabled style="width: 240px">
                                    <el-option label="轻量系统" value="1">轻量系统</el-option>
                                    <el-option label="小型系统" value="2">轻量系统</el-option>
                                    <el-option label="标准系统" value="3">轻量系统</el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="OS类型英文" prop="osTypeEn" required>
                                <el-input disabled v-model="formData.osTypeEn"></el-input></el-form-item></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="是否为桥设备" prop="bridgeEquipment" required>
                                <el-radio-group v-model="formData.bridgeEquipment" disabled>
                                    <el-radio :value="'0'">否</el-radio>
                                    <el-radio :value="'1'">是</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="支持连接类型" prop="supportConnection" required>
                                <el-checkbox-group v-model="supportConnections" disabled>
                                    <el-checkbox v-for="item in supportConnectionList" :key="item.id" :label="item.name" :value="item.value">
                                        {{ item.name }}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="PIN码方式" prop="pinCodeMethod" required>
                                <el-radio-group v-model="formData.pinCodeMethod" disabled>
                                    <el-radio :value="'1'">默认PIN码</el-radio>
                                    <el-radio :value="'2'">随机PIN码</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="认证方式" prop="supportAuthentication" required>
                                <el-radio-group v-model="formData.supportAuthentication" disabled>
                                    <el-radio :value="'1'">无认证</el-radio>
                                    <el-radio :value="'2'">一品一密</el-radio>
                                    <el-radio :value="'3'">一机一密</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="是否支持靠近发现功能" prop="supportProximityDiscovery" required class="label-break">
                                <el-radio-group v-model="formData.supportProximityDiscovery" disabled>
                                    <el-radio :value="'0'">否</el-radio>
                                    <el-radio :value="'1'">是</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="formData.supportProximityDiscovery === '1'">
                        <el-col :span="8">
                            <el-form-item label="拉起APP包名" prop="appPackageName" required>
                                <el-input disabled v-model="formData.appPackageName"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="formData.supportProximityDiscovery === '1'">
                        <el-col :span="8">
                            <el-form-item label="deepLink" prop="deepLink" required>
                                <el-input disabled v-model="formData.deepLink"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="应用ID" prop="appIdentifier" required>
                                <el-input disabled v-model="formData.appIdentifier"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="上传产品图片" prop="imageBase64" required>
                                <el-image
                                    style="width: 100px; height: 100px"
                                    :src="formData.imageBase64"
                                    ref="imageRef"
                                    :preview-src-list="[formData.imageBase64]" 
                                    fit="cover"
                                />
                                <ElButton @click="showPreview = true" class="img">查看</ElButton>
                                <el-image-viewer
                                    v-if="showPreview"
                                    :url-list="[formData.imageBase64]"
                                    @close="showPreview = false"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="高清图片" prop="highImageBase64">
                                <el-image
                                    style="width: 100px; height: 100px"
                                    :src="formData.highImageBase64"
                                    ref="imageHighRef"
                                    :preview-src-list="[formData.highImageBase64]" 
                                    fit="cover"
                                />
                                <ElButton @click="showHighImage = true" class="img">查看</ElButton>
                                <el-image-viewer
                                    v-if="showHighImage"
                                    :url-list="[formData.highImageBase64]"
                                    @close="showHighImage = false"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
            </div>
        </div>
    </el-form>

        <div class="product-item">
            <div class="product-title">配置文件</div>
            <div class="product-content flex">
                <div>
                    <p>该文件用于导入智慧生活云平台。</p>
                    <p>包含：</p>
                    <p v-if="formData.supportProximityDiscovery == '1'">1.Image文件夹<br/>2.main_help.json<br/>3.version.json</p>
                    <p v-else>1.assets文件夹<br/>2.main_device_information.json<br/>3.version.xml</p>
                </div>
                <ElButton @click="handleDownload" class="img">下载</ElButton>
            </div>
            <div class="product-button">
                <ElButton @click="handlePass" :disabled="!isReviewStatus" :type="isReviewStatus ? 'primary': 'info'">审核通过</ElButton>
                <ElButton @click="handleFailed" :disabled="!isReviewStatus" :type="isReviewStatus ? 'danger': 'info'">审核驳回</ElButton>
            </div>
        </div>
        <div class="product-item">
            <div class="product-title">审核状态</div>
            <div class="process-list">
                <div class="process-item" v-for="item in examineList">{{ item }}</div>
            </div>
        </div>
        <ReviewPassDialog ref="reviewPassDialog" @completePass="completePass"></ReviewPassDialog>
        <ReviewFailedDialog ref="reviewFailedDialog" @completeFailed="completeFailed"></ReviewFailedDialog>
    </div>
</template>

<script lang="ts" setup>
import ReviewPassDialog from "./ReviewPassDialog.vue";
import ReviewFailedDialog from "./ReviewFailedDialog.vue";
import router from '@/router'
import { useRoute } from 'vue-router'

interface Params {
    id: string
}

interface ProductDetail {
    appPackageName?: string,
    deepLink?: string,
    appIdentifier?: string,
    bridgeEquipment: string,
    categoryDictId: string,
    categoryDictParentId: string,
    imageBase64: string,
    highImageBase64: string,
    imageId: string,
    imageName: string,
    nameEn: string,
    osSystemVersion: string,
    osType: string,
    osTypeEn: string,
    status: string,
    submitTime: string,
    supportConnection: string,
    pinCodeMethod: string,
    supportAuthentication: string,
    supportProximityDiscovery: string,
    transMap: string,
    id: string,
    prodId: string,
    model: string,
    type: string,
    name: string,
    brand: string,
    brandEn: string,
    createTime: string,
    createUser: string,
    createUserName: string,
    updateTime: string,
    updateUser: string,
    updateUserName: string,
}

const route = useRoute();
const params = ref<Params>({
    id: ''
});

const formData = ref<ProductDetail>({
    appPackageName: '',
    deepLink: '',
    appIdentifier: '',
    bridgeEquipment: '',
    categoryDictId: '',
    categoryDictParentId: '',
    imageBase64: '',
    highImageBase64: '',
    imageId: '',
    imageName: '',
    nameEn: '',
    osSystemVersion: '',
    osType: '',
    osTypeEn: '',
    status: '',
    submitTime: '',
    supportConnection: '',
    pinCodeMethod: '',
    supportAuthentication: '',
    supportProximityDiscovery: '',
    transMap: '',
    id: '',
    prodId: '',
    model: '',
    type: '',
    name: '',
    brand: '',
    brandEn: '',
    createTime: '',
    createUser: '',
    createUserName: '',
    updateTime: '',
    updateUser: '',
    updateUserName: '',
});

const showPreview = ref(false)
const showHighImage = ref(false)
const examineList = ref<any>();
const categoryList = ref<any>();
const reviewPassDialog = ref<any>();
const reviewFailedDialog = ref<any>();
const supportConnections = computed(() =>  formData.value.supportConnection.split(","));
const isReviewStatus = computed(() =>  formData.value.status == '1');

const supportConnectionList: any = ref([
    { id: 1, name: 'WI-FI', value: '1' },
    { id: 2, name: 'BLE', value: '2' },
    { id: 3, name: 'SLE', value: '3' },
    { id: 4, name: '以太网', value: '4' }
]);

const getCategoryList = async () => {
    try {
        const res: any = await MyService.product.getCategoryTree({ searchKey: ''});
        if (res.code === 200) {
            categoryList.value = res.data;
        }
    } catch (error) {}
};

const getProductReviewExamineList = async () => {
    try {
        const res: any = await MyService.resource.getProductReviewExamineList(params.value);
        if (res.code === 200) {
            examineList.value = res.data
        } else {
        }
    } catch (error) {}
};

const getProductDetails = async () => {
    try {
        const res: any = await MyService.resource.getProductReviewDetail(params.value);
        if (res.code === 200) {
            formData.value = res.data;
        } else {
        }
    } catch (error) {}
};

const handlePass = () => {
    reviewPassDialog.value?.open(formData.value?.id, formData.value?.prodId);
};

const handleFailed = () => {
    reviewFailedDialog.value?.open(formData.value?.id);
};

const completePass = (result: boolean) => {
    if(result){
        router.push({ name: 'productReview'});
    }
};

const completeFailed = (result: boolean) => {
    if(result){
        router.push({ name: 'productReview'});
    }
};

const handleDownload = async () => {
    try{
        const res: any = await MyService.resource.getProductProfileDownload({id:formData.value.id});
        const contentDisposition = res.headers['content-disposition'];
        let filename = '';
        if (contentDisposition) {
            const filenameMatch = contentDisposition.match(/filename="?(.+)"?/);
            if (filenameMatch && filenameMatch[1]) {
                filename = filenameMatch[1];
            }
            const utf8FilenameMatch = contentDisposition.match(/filename\*=utf-8''(.+)/);
            if (utf8FilenameMatch && utf8FilenameMatch[1]) {
                filename = decodeURIComponent(utf8FilenameMatch[1]);
            }
        }
        const blob = new Blob([res.data]);
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = filename;
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
    }catch(error){
    }
};

onMounted(() => { 
    params.value = { id: JSON.parse(JSON.stringify(route.query.id)) };
    getCategoryList()
    getProductReviewExamineList()
    getProductDetails();
});

</script>

<style scoped lang="scss">
.product-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 24px;
    height: 100%;
    overflow: auto;

    .product-nav {
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .product-item {

        .product-title {
            position: relative;
        }

        .product-title::before {
            content: "";
            position: absolute;
            left: -12px;
            top: 0;
            bottom: 0;
            width: 3px;
            background-color: #000;
        }

        .product-content {
            margin: 12px 0 24px 0;

            p {
                margin: 0;
            }
        }

        .product-button {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 12px;
            gap: 100px;
        }

        .process-list {
            margin: 10px 0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;

            .process-item {
                display: flex;
                color: #00BFBF;
            }
        }
    }

}

.el-input {
    width: 240px;
}

.img {
    height: 24px;
    margin-left: 10px;
}

.slot{
    width: 130px;
    display: flex;
    justify-content: space-between;
    color: #000;
    font-size: 12px;
}

:deep(.label-break .el-form-item__label) {
  margin-top: -4px;
  line-height: 20px;
}

</style>